<!--
 * @Description: 我的题库
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-18 14:42:57
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-27 10:45:33
-->
<template>
    <bar title="我的题库" titleSize="max" :icon="true">
        <div class="question-list" v-if="list.length !== 0">
            <div class="item" v-for="item in list" :key="item.id">
                <div class="left">
                    <div class="name">{{ dateFormat(item.createTime) }}</div>
                    <div class="info">
                        {{ item.title }}
                    </div>
                </div>
                <div class="right">
                    <button class="btn plain" @click="go_make_question(item.topicId)">继续刷题</button>
                </div>
            </div>
            <el-pagination
                class="pagination"
                background
                layout="prev, pager, next"
                :total="total"
                :pager-count="5"
                :page-size.sync="pageSize"
                @current-change="pageChange"
            >
            </el-pagination>
        </div>
        <no-data v-else></no-data>
    </bar>
</template>
<script>
import { getOrderList } from "~/api";
export default {
    data() {
        return {
            // tabs订单状态
            status: 2,
            // 订单类型 空代表全部
            type: "2",
            page: 1,
            pageSize: 10,
            total: 0,
            list: [],
        };
    },
    beforeMount() {
        this._getQuestionList();
    },
    methods: {
        // 获取题库列表
        _getQuestionList() {
            getOrderList(this.status, this.type, this.page, this.pageSize).then(
                (res) => {
                    if (res.data.code === 0) {
                        this.total = res.data.data.total;
                        this.list = res.data.data.list;
                    }
                }
            );
        },
        // 去刷题
        go_make_question(id){
            this.$router.push('/LearningCenter/detail/'+id)
        },
        // 页数改变
        pageChange(page) {
            this.page = page;
            this._getQuestionList();
        },
    },
};
</script>
<style lang="scss" scoped>
.question-list {
    border-top: 1px solid #eeeeee;
    padding-top: 30px;
    .item {
        box-shadow: 0px 0px 6px rgba(153, 153, 153, 0.1);
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px;
        & + .item {
            margin-top: 20px;
        }
        .left {
            padding-right: 10px;
            .name {
                font-size: 12px;
                color: #333333;
            }
            .info {
                font-size: 14px;
                color: #999999;
                margin-top: 16px;
                line-height: 1.5;
            }
        }
        .right {
            .btn {
                min-width: 100px;
                height: 35px;
                font-size: 16px;
            }
        }
    }
    .pagination {
        text-align: center;
        padding: 20px 0;
    }
}
</style>